<template>
  <div class="log-root">
    <div class="log-chart-container">
      <chartPieLog class="pie info-root" ref="ChartPieLogRef"></chartPieLog>
      <chartLineLog class="line info-root" ref="ChartLineLogRef"></chartLineLog>
    </div>
    <div class="log-table-container info-root">
      <tableLog ref="TableLogRef" @refresh-chart="reloadChart"></tableLog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import chartPieLog from "./ChartPieLog.vue";
import chartLineLog from "./ChartLineLog.vue";
import tableLog from "./TableLog.vue";

const ChartPieLogRef = ref();
const ChartLineLogRef = ref();
const TableLogRef = ref();

const reloadChart = () => {
  ChartPieLogRef?.value?.reload();
  ChartLineLogRef?.value?.reload();
}
onMounted(() => {
  ChartPieLogRef?.value?.reload();
  ChartLineLogRef?.value?.reload();
  TableLogRef?.value?.reload();
})


</script>

<style scoped lang="scss">
$height-chart: 240px;
$height-log-search-form: 100px;
$height-log-table-pagination: 60px;

.log-root {
  @include box(100%, 100%);
  @include flex(column, flex-start, center);

  .info-root {
    border: 0;
    padding: 10px;
  }

  .log-chart-container {
    @include flex(row, space-around, center);
    @include box(100%, $height-chart);

    .pie {
      @include box(520px, 100%);
      min-width: 520px;
      max-width: 520px;
    }

    .line {
      @include box(100%, 100%);
      margin-left: 15px;
      padding: 10px 0 0 10px;
    }
  }

  .log-table-container {
    @include box(100%, calc(100% - #{$height-chart}));
    margin-top: 15px;
  }
}
</style>